<template>
  <view>
    <view class="calendar">
      <view class="calendar-header">
        <button @click="prevMonth"><</button>
        <text>{{ currentYear }} 年 {{ currentMonth }} 月</text>
        <button @click="nextMonth">></button>
      </view>
      <view class="calendar-weekdays">
        <view v-for="day in weekdays" :key="day">{{ day }}</view>
      </view>
      <view class="calendar-days">
        <view
          v-for="day in calendarDays"
          :key="day.date"
          :class="{ 'has-attendance': day.hasAttendance }"
          @click="dayClick(day)"
        >
          {{ day.date }}
          <br />
          <text v-if="day.hasAttendance" class="has-text">已打卡</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAttendanceInfo, attendanceIn } from "@/api/attendance.js";

export default {
  name: "Detail",
  data() {
    return {
      userId: uni.getStorageSync("userId"),
      projectId: uni.getStorageSync("projectId"),
      currentYear: new Date().getFullYear(), // 当前年份
      currentMonth: new Date().getMonth() + 1, // 当前月份
      weekdays: ["日", "一", "二", "三", "四", "五", "六"], // 星期数组
      calendarDays: [], // 日历日期数组
    };
  },
  methods: {},
  onLoad() {
    this.getAttendanceData();
    this.generateCalendar();
  },
  created() {},
  mounted() {},
  methods: {
    async getAttendanceData() {
      try {
        const res = await getAttendanceInfo({
          userId: this.userId,
          projectId: this.projectId,
          year: this.currentYear,
          month: this.currentMonth,
        });
        if (res.code === 1) {
          this.attendanceInfo = res.data;
          this.generateCalendar();
        }
      } catch (err) {
        console.log("getAttendanceData", err);
        uni.showToast({ title: "获取打卡信息失败", icon: "none" });
      }
    },
    generateCalendar() {
      const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1);
      const lastDay = new Date(this.currentYear, this.currentMonth, 0);
      const daysInMonth = lastDay.getDate();
      const startDay = firstDay.getDay();

      this.calendarDays = [];

      // 填充空白日期
      for (let i = 0; i < startDay; i++) {
        this.calendarDays.push({ date: "", hasAttendance: false });
      }

      // 填充本月日期
      console.log("attendanceInfo", this.attendanceInfo);
      for (let i = 1; i <= daysInMonth; i++) {
        const date = `${this.currentYear}-${this.currentMonth}-${i}`;
        console.log("date", date);
        const hasAttendance = this.attendanceInfo[date] || false;
        this.calendarDays.push({ date: i, hasAttendance });
      }
    },

    /**
     * 切换到上个月
     */
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentYear--;
        this.currentMonth = 12;
      } else {
        this.currentMonth--;
      }

      this.getAttendanceData();
      this.generateCalendar();
    },
    /**
     * 切换到下个月
     */
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentYear++;
        this.currentMonth = 1;
      } else {
        this.currentMonth++;
      }

      this.getAttendanceData();
      this.generateCalendar();
    },
    dayClick(day) {
      console.log("点击日期:", day.date);
    },
  },
};
</script>

<style scoped>
.calendar {
  margin-top: 20px 5px 0 5px;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-header button {
  margin: 0 10px;
}

.calendar-weekdays {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
.calendar-days {
  display: flex;
  flex-wrap: wrap;
}
.calendar-days view {
  width: 14.28%;
  text-align: center;
  padding: 10px 0;
  /* border: 1px solid #ccc; */
}
.has-attendance {
  background-color: #63f363;
}
</style>
